<template>
	<el-space>
		<el-tag v-for="(item, index) in props.list.slice(0, usefulNum)" :key="index" type="primary" effect="dark">
			{{ item }}
		</el-tag>

		<el-popover
			v-if="usefulNum < props.list.length"
			placement="right"
			:width="400"
			trigger="hover"
			content="this is content, this is content, this is content"
		>
			<template #reference>
				<el-tag type="primary" effect="dark">...</el-tag>
			</template>

			<div class="tag-wrap">
				<div class="tag-type">手动标签</div>
				<el-space wrap>
					<el-tag v-for="(item, index) in props.list" :key="index" type="primary">{{ item }}</el-tag>
				</el-space>
			</div>
		</el-popover>
	</el-space>
</template>

<script setup>
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		showNum: {
			type: Number,
			default: 0
		}
	})

	const usefulNum = computed(() => Math.min(props.showNum, props.list.length))
</script>

<style scoped lang="less">
	.tag-wrap {
		padding: 10px;
		.tag-type {
			margin-bottom: 10px;
		}
	}
</style>
